<template>
	<view class="orderView">
		<van-nav-bar title="我的订单" fixed left-arrow class="orderNav" @click-left="onClickLeft"/>
		<van-tabs swipeable  tab-active-class="active" custom-class="tabs" sticky :active="active">
			<van-tab title="全部订单">
				<div class="orderList">
					
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						
						<div class='cplist' @tap="details(0)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class='cplist' @tap="details(0)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary" class="red">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="bottoming">已经到底了~</div>
				</div>
			</van-tab>
			<van-tab title="待付款">
				<div class="orderList">
					
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						
						<div class='cplist' @tap="details(1)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary" class="red">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="bottoming">已经到底了~</div>
				</div>
			</van-tab>
			<van-tab title="待发货">
				<div class="orderList">
					
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						
						<div class='cplist' @tap="details(2)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary" class="red">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="bottoming">已经到底了~</div>
				</div>
			</van-tab>
			<van-tab title="待收货">
				<div class="orderList">
					
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						
						<div class='cplist' @tap="details(3)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary" class="red">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="bottoming">已经到底了~</div>
				</div>
			</van-tab>
			<van-tab title="已完成">
				<div class="orderList">
					
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						
						<div class='cplist' @tap="details(0)">
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary" class="red">按钮2</button>
						</div>
					</div>
					<div class="orderBox">
						<div class="title">
							<h2>多多官方旗舰店<van-icon name="arrow" /></h2>
							<span>交易成功</span>
						</div>
						<div class='cplist'>
							<div class="img">
								<img src="~@/static/home/pic(1).png" >
							</div>
							<div class="info">
								<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
								<div class="desc">
									<span>颜色分类：咖色</span>
									<span>x2</span>
								</div>
								<div class="jifen">
									积分 <span>49.90</span>
								</div>
							</div>
						</div>
						<div class="heji">
							共1件商品  合计：500 <span>+200积分</span>
						</div>
						<div class="btn">
							<button type="primary">按钮1</button>
							<button type="primary">按钮2</button>
						</div>
					</div>
					<div class="bottoming">已经到底了~</div>
				</div>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1
			};
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.active = option.active
			console.log(option.active); //打印出上个页面传递的参数。this.active = option.active
		},
		methods:{
			onClickLeft() {
				uni.navigateBack()
			},
			onPullDownRefresh() {
				// this.loadData('refresh');
				// 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 2000);
			},
			details(state){
				uni.navigateTo({
					url: `unpaid?state=${state}`
				});
			}
			
		}
	}
</script>

<style lang="less">
.orderView{
	background: #F7F7F7;
	min-height: 100vh;
	box-sizing: border-box;
}
	
.tabs{
	.van-tabs__line{background: #f2e262;}
	.van-tabs__wrap {
		height: 88upx;
		top: 120upx !important;
		&::after{border-bottom: none}
	}
	.active{
		color: #616161;
		font-weight: bold;
	}
}

.orderList{
	width: 100%;
	padding-bottom: 20upx;
	margin-top: 20upx;
	padding-top: 120upx;
	.orderBox{
		width: 100%;
		display: inline-block;
		background: #fff;
		margin-bottom: 20upx;
		padding-bottom: 25upx;
		.title{
			height: 84upx;
			line-height: 84upx;
			border-bottom: 1upx solid #E0E0E0;
			h2{
				float: left;
				padding-left: 30upx;
				font-size: 26upx;
				color: #000;
				.van-icon{
					vertical-align: middle;
					color: #999;
				}
			}
			span{
				float: right;
				padding-right: 28upx;
				color: #FF242E;
				font-size:26upx;
			}
		}
		.cplist{
			margin-top: 28upx;
			width: 100%;
			display: inline-block;
		}
		.img{
			float: left;
			width: 196upx;
			text-align: center;
			img{
				width: 105upx;
				height: 105upx;
			}
		}
		.info{
			float: left;
			width: 520upx;
			h2{
				line-height: 32upx;
				font-size: 26upx;
				color: #000;
			}
			.desc{
				color: #999;
				font-size: 20upx;
				margin-top: 14upx;
				span:nth-child(1){float: left;}
				span:nth-child(2){float: right;}
			}
			.jifen{
				color: #333;
				font-size: 20upx;
				span{margin-left: 5upx;font-size: 24upx}
			}
		}
		.heji{
			width: 100%;
			text-align: right;
			margin-top: 35upx;
			font-size: 24upx;
			color: #333;
			display: inline-block;
			padding-right: 20upx;
			box-sizing: border-box;
			span{
				font-size: 20upx
			}
		}
		.btn{
			width: 100%;
			text-align: right;
			margin-top: 29upx;
			display: inline-block;
			padding-right: 15upx;
			box-sizing: border-box;
			button{
				width: 154upx;
				height: 62upx;
				border-radius: 10upx;
				background: #fff;
				border:1upx solid #999;
				font-size: 24upx;
				color: #616161;
				display: inline-block;
				margin-left: 20upx;
				padding: 0;
				&.red{
					border:1upx solid #FF242E;
					color: #FF242E;
				}
			}
		}
	}
}
.bottoming{height: 108upx;line-height: 108upx;text-align: center;width: 100%;color: #D3D3D3;display: inline-block;}
</style>
